<template>
    <div class="login">
        <van-nav-bar title="登录" right-text="注册" left-arrow @click-left="goBack" @click-right="onClickRight"/>
        <div class="content">
            <div class="login-con">
                <div class="login-info">
                    <input type="text" v-model="userName" placeholder="请输入用户名">
                </div>
                <div class="login-info">
                    <input type="password" v-model="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="other-login">
                <router-link :to="{name: 'phoneLogin'}" tag="span">忘记密码</router-link>
                <router-link :to="{name: 'phoneLogin'}" tag="span">使用手机短信登录</router-link>
            </div>
            <div class="submit">
                <button type="submit" class="submit-btn" @click="signin">登录</button>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import {
    NavBar,
    Toast
} from "vant"
import {
    login
} from "../../axios/api.js"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Toast.name]: Toast
    },
    data() {
        return {
            userName: "",
            password: ""
        }
    },
    methods: {
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        //进入注册页
        onClickRight() {
            this.$router.push("/register");
        },
        signin() {
            let userInfo = new URLSearchParams();
            userInfo.append("userName",this.userName);
            userInfo.append("password",this.password);
            userInfo.append("type","0");
            login(userInfo).then(res => {
                console.log(res.data);
                if (res.data.code != 200) {
                    this.$toast(res.data.msg);
                     sessionStorage.setItem("getUser",res.data.data.userName)
                     sessionStorage.setItem("setToken",res.data.data.token)
                }else {
                    axios.defaults.headers.Authorization = res.data.data.token;
                    this.$store.commit("setToken",res.data.data.token);
                    this.$store.commit("getUser",res.data.data.userName);
                    this.$store.commit("changeLogin",true);//登录后改变登录状态 isLogin = true
                    this.$toast(res.data.msg);
                    this.$router.push({name: "mine"})//this.$route.query.redirect
                }
            }).catch(function(err){
                console.log(err)
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.login {
    background: #fff;
    .content {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        .login-con {
            width: 100%;
            background: #fff;
            .login-info {
                width: 100%;
                box-sizing: border-box;
                line-height: 24px;
                background-color: #fff;
                color: #969799;
                font-size: 14px;
                & > input {
                    display: flex;
                    padding: 10px 15px;
                    width: 91.6%;
                    border: 0;
                    border-bottom: 1px solid #ebedf0;
                }
            }
        }
        .other-login {
            display: flex;
            margin-top: 15px;
            & > span {
                flex: 1;
                display: inline-block;
                text-align: left;
                font-size: @base_textSize;
                color: @base_textColor;
            }
            span:last-child {
                text-align: right;
            }
        }
        .submit {
            margin-top: .67rem;
            width: 100%;
            background-color: #fff;
            color: #fff;
            font-size: @base_textSize;
            .submit-btn {
                padding: 10px;
                width: 100%;
                height: 1.07rem;
                border: 0;
                border-radius: 3px;
                background: #ff976a;
                outline: none;
            }
        }
    }
}
</style>